class Lock
    
    init: (option)-> #TODO:set option
        @initBoard()
        @initCircles()
        @bindEvent()

    initBoard: ()-> # 初始化面板
        @w = window.innerWidth
        @h = window.innerHeight

        str = "<canvas id='lock' width=#{@w} height=#{@h} style='background-color:#305066;display:inline-block;' />"
        wrap = document.createElement('dev')
        wrap.innerHTML = str
        document.body.appendChild(wrap)
        @lock = document.getElementById('lock')

    initCircles: ->
        @ctx = @lock.getContext("2d")
        @r = (@w/16)

        @ctx.lineWidth = 1.0
        @ctx.strokeStyle = "#fff"

        @arr = []
        @ctx.clearRect(0, 0, @ctx.canvas.width, @ctx.canvas.height);

        y = @h/4
        for i in [0..2]
            x = (@w/4)*(i+1)
            @ctx.beginPath()
            @ctx.lineWidth = 2
            @ctx.arc(x, y, @r, 0, Math.PI*2, true)
            @ctx.closePath()
            @ctx.stroke()

            obj = 
                x:x
                y:y
                count:i

            @arr.push obj

            for j in [0..1]
                @ctx.beginPath()
                @ctx.lineWidth = 2
                @ctx.arc(x, y*(j+2), @r, 0, Math.PI*2, true)
                @ctx.closePath()
                @ctx.stroke()

                obj = 
                    x:x
                    y:y*(j+2)
                    count:i

                @arr.push obj

    drawLine: (pre, curr)->
        @ctx.beginPath()
        @ctx.lineWidth = 2  
        @ctx.moveTo(pre.x, pre.y)
        for p in @points
            @ctx.lineTo(p.x, p.y)            
        @ctx.lineTo(curr.x, curr.y) 
        @ctx.stroke();
        @ctx.closePath()

    getPosition: (e)-> # 获取相对于canvas原点的位置。
        rect = e.currentTarget.getBoundingClientRect();
        po = 
            x: e.touches[0].clientX - rect.left,
            y: e.touches[0].clientY - rect.top
        po

    drawPoint:(x, y)->
        @ctx.fillStyle = "#fff"
        @ctx.beginPath()
        @ctx.arc(x, y, @r*2/3, 0, Math.PI*2, true)
        @ctx.closePath()
        @ctx.stroke()
        @ctx.fill()

    bindEvent: ->
 
        @points = []
        @lock.addEventListener 'touchstart', (e)=>
            e.preventDefault()
            curr = @getPosition(e)
            for i in [0...@arr.length]
                c = @arr[i]
                if c.x - @r < curr.x < c.x + @r && c.y - @r < curr.y < c.y + @r
                    @circle = c
                    @drawPoint(c.x, c.y)

        @lock.addEventListener 'touchmove', (e)=>
            @ctx.clearRect(0, 0, @ctx.canvas.width, @ctx.canvas.height);
            @initCircles()
            curr = @getPosition(e)    
            for i in [0...@arr.length]
                c = @arr[i]
                if c.x - @r < curr.x < c.x + @r && c.y - @r < curr.y < c.y + @r
                    multi = false
                    for p in @points
                        if p.x is c.x and p.y is c.y
                            multi = true
                    @points.push(c) unless multi
            for p in @points
                @drawPoint(p.x, p.y)
            @drawLine(@circle, curr)
   
        @lock.addEventListener 'touchend', (e)=>
            @points = []
            @circle = {}
            @initCircles()
            

new Lock().init();